
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import {formatNumber, navigateBack, navigateTo, showToast, subTime} from '../../utils/common'
import { EarningsOutput } from '../../api/api'

import './fishDetail.scss'
import nav_01 from "../../assets/img/banner_01.jpg";

import {IStoreProps} from '../../store/Stores'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineFishDetail extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    id: '',
    item: {} as EarningsOutput
  }

  componentWillMount () {
    let { id } = this.$router.params
    if(!id) { showToast('参数错误~'); setTimeout(() => { navigateBack() }, 2000) }
    this.setState({ id })
    this.getItem(id)
  }

  getItem(id: string) {
    let { fishStore } = this.props.stores
    fishStore.orderDetailsById({
      id,
      callback: res => {
        console.log(res)
        this.setState({ item: res })
      }
    })
  }

  link = (url: string) => {
    navigateTo( url )
  }

  render () {
    let { item } = this.state
    return (
      <View className='fish-detail page-bg'>
        <View className='list03'>
          <View className='list01__item'>
            <Image className='list01__img'  src={item.comImg || ''} />
            <View className='list01__info'>
              <View className='list01__line'>
                <View className='list01__date'>第{formatNumber(item.periodsNum)}期</View>
                <View className='list01__title'>{item.comName}</View>
                <View className='list01__status'>{item.status}</View>
              </View>
              <View className='list01__line list01__line-i'>
               {/*  <View className='list01__i'>
                  收益({item.proportion}%)
                </View>
                <View className='list01__i'>
                  期限({item.cultureDays}天)
                </View> */}
              </View>
              <View className='list01__line list01__line-sk'>
                <View className='list01__line-price yuan'>{item.unitPrice}<Text className='small'>/条</Text> </View>
                <View className='list01__line-num'><Text className='small'>x</Text>{item.productQuantity}</View>
              </View>
            </View>
          </View>

          <View className='line-desc__wrap'>
            <View className='line-desc'>
              <View className='line-desc__title'>购买时间：</View>
              <View className='line-desc__con'>{subTime(item.payTime)}</View>
            </View>
            <View className='line-desc'>
              <View className='line-desc__title'>到期时间：</View>
              <View className='line-desc__con'>{subTime(item.expireTime)}</View>
            </View>
            <View className='line-desc'>
              <View className='line-desc__title'>购买数量：</View>
              <View className='line-desc__con'>{item.productQuantity}</View>
            </View>
            <View className='line-desc'>
              <View className='line-desc__title'>实付金额：</View>
              <View className='line-desc__con yuan'>{item.amount}</View>
            </View>
           {/*  <View className='line-desc'>
              <View className='line-desc__title'>分润方式：</View>
              <View className='line-desc__con'>现金分润(到期返还)</View>
            </View> */}
          </View>

          <View className='line-common__wrap'>
          {/*   <View className='line-common'>
              <View className='line-common__title'>分润收益</View>
              <View className='line-common__con color-theme yuan fw'>{item.dailyIncome}<Text className='small'>/每天</Text> </View>
            </View> */}
           {/*  <View className='line-common'>
              <View className='line-common__title'>已分润天数</View>
              <View className='line-common__con'>{item.alreadyDays}<Text className='small'>天</Text> </View>
            </View> */}
            <View className='line-common'>
              <View className='line-common__title'>累计分润</View>
              <View className='line-common__con color-orange yuan fw'>{item.cumulative}</View>
            </View>
          </View>
        </View>

        <View className='circular-submit' onClick={this.link.bind(this, '/pages/mine/profit')}>前往分润中心</View>

      </View>
    )
  }
}

export default MineFishDetail
